<template>
	<view class="my_Pets">

		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
			<view id="demo1" v-for="item in dataval" class="scroll-view-item_H ">
				<view class="pets_content " @click="showModal" data-target="Image">
					<view class="pets_top">
						<image class="pets_logo" :src="item.img"></image>
						<view class="pets_content_">
							<view>{{item.name}}</view>
							<view>{{item.Gender}}</view>
							<view>{{item.time}}</view>
						</view>
						<!-- <text class="ptes_name">{{item.time}}</text>
						<text class="ptes_name">{{item.Gender}}</text> -->
					</view>

					<!-- <text class="pets_text">{{item.name}}</text> -->
				</view>
			</view>

		</scroll-view>
		
		
		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<div class="img_box">
					<img src="../../../static/myimg/dianzi.png" alt="">
				</div>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">返回</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			dataval: {
				type: Array,
				default: []
			}
		},
		components: {},
		data() {
			return {
				modalName: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}

			}
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
		},
		watch: {},

		onReachBottom() { //页面上拉触底事件的处理函数

		},
		onPullDownRefresh() { //监听用户下拉动作，一般用于下拉刷新
			//需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			//uni.startPullDownRefresh(); 开启
			// uni.stopPullDownRefresh(); 关闭
		},
		onUnload() { //监听页面卸载

		},
		onHide() { //监听页面隐藏

		},
		onLoad() { // 替代 created 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例

		},
		onReady() { //替代 mounted 监听页面初次渲染完成

		},

		onShow() { //监听页面显示

		}
	}
</script>
<style lang="scss" scoped>
	.scroll-Y {
		height: 300upx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 90px
	}
.img_box {
		width: 90%;
		height: 120vw;
		margin: auto;
	}
	img{
		width: 100%;
	}
	.scroll-view-item {
		height: 310upx;
		line-height: 300upx;
		text-align: center;
		font-size: 36upx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 63%;
		line-height: 300upx;
		// text-align: center;
		font-size: 36upx;
	}

	.home {
		width: 100%;
		height: 100%;
	}

	.scroll-view_H {}

	.my_Pets {
		height: 120px;
		width: 100%;
	}

	.scroll-view-item_H::-webkit-scrollbar {
		/*隐藏滚轮*/
		display: none;
	}

	.pets_content {
		width: 200px;
		height: 90px;
		background: linear-gradient(to right, #2dd2ec 0%, #09d9db 59%, #1c95cf 100%, #0073f8 100%);
		border-radius: 8px;
		position: relative;

		// margin-right: 10px;
		.pets_top {
			width: 90%;
			height: 100%;
			display: flex;
			align-items: center;

			.pets_logo {
				background-size: 100%;
				width: 130upx;
				height: 110upx;
				margin-left: 12%;
				border-radius: 50%
			}

			.pets_content_ {
				width: 250upx;
				height: 60px;
				margin-top: 4px;

				view {
					width: 100%;
					height: 20px;
					line-height: 20px;
					text-align: center;
					color: white;
				}
			}

			// 			text {
			// 				font-size: 12px;
			// 				margin-left: 15upx;
			// 				color: white;
			// 			}
		}

		

		.pets_text {
			width: 90%;
			height: 30px;
			text-indent: 15upx;
			margin: auto;
			color: white;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
		}
	}
</style>
